<template>
  <div class="app">
    <!-- 头部 -->
    <Header :title="title" :icon="icon" :right="right"></Header>
    <!-- 主体部分 -->
    <router-view class="body"></router-view>
    <!-- 蒙版 -->
    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
      <bgmask class="mask" v-if="bln"></bgmask>
    </transition>
    <!-- 侧边栏 -->
    <transition enter-active-class="animated fadeInLeft">
      <LeftMenu class="leftMenu" v-if="bln"></LeftMenu>
    </transition>

    <!-- 登录页面 -->
    <transition
      enter-active-class="animated fadeInRight"
      leave-active-class="animated fadeOutRight"
    >
      <login v-if="bln2"></login>
    </transition>
  </div>
</template>
<script>
import Header from "./components/Header.vue";
import LeftMenu from "./components/LeftMenu.vue";
import bgmask from "./components/Bgmask.vue";
import login from "./components/Login.vue";
import {mapState,mapActions} from 'vuex';
export default {
  data() {
    return {
      bln: false,
      bln2: false,
      title: "POCO摄影",
      icon: "icon-uniE137",
      right: ""
    };
  },
  computed: {
    ...mapState(["allData"])
  },
  methods: {
    ...mapActions(["getAllData"])
  },
  mounted() {
    this.getAllData();
  },
  components: {
    Header,
    LeftMenu,
    login,
    bgmask
  }
};
</script>
<style scoped>
.leftMenu {
  height: 100%;
  width: 80%;
  background: #333;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
}
.app {
  height: 100%;
  /* flex-direction: column; */
  position: relative;
}
.body {
  position: absolute;
  top: 0.88rem;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}
</style>
